@charset "utf-8";
@import "_iconfont";
*{
    margin:0;
    padding:0;
}
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
#web{
    width:r(750);
    height:100%;
    position:relative;
}
header{
    width:100%;
    height:px(105);
    overflow: hidden;
    .back_btn{
        width:r(120);
        height:100%;
        margin-left:r(23);
        input{
            width:r(123);
            height:px(57);
            line-height: px(57);
            text-align: center;
            margin-top:px(24);
            border:1px solid #ff9344;
            border-radius: px(20);
            background: #fff;
        }
    }
    p{
        text-align:center;
        line-height:px(105);
        font-size:16px;
    }
    .selectBar{
        width:px(158);
        height:px(54);
        border:1px solid #fe9241;
        margin:px(25) r(30) 0 0;
        padding-left:r(8);
        select{
            width:100%;
            height:100%;
            border:none;
            appearance: none;
            -webkit-appearance: none;
            background:#fff url("../images/triangle.png");
            background-repeat: no-repeat;
            background-position: right px(16) center;
            background-size: px(30) px(16);
            vertical-align: top;
        }
    }
}
// 中间内容部分
.section{
    width:100%;
    position: absolute;
    top:px(105);
    bottom:px(150);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .list_img{
        width:100%;
        margin-top:px(30);

        ul{
            li{
                width:r(150);
                height:r(150);
                float:left;
                margin-left:r(32);
                a{
                    display: block;
                    width:100%;
                    height:100%;
                    img{
                        width:100%;
                        height:100%;
                        border-radius: 50%;
                    }
                }
            }
        }
        .circle{
            width:r(200);
            height:r(20);
            margin:auto;
            clear:both;
            padding-top:px(20);
            ul{
                width:100%;

                li{
                    float:left;
                    width:25%;
                    height:r(20);
                    margin:0 auto;
                    a{
                        display: block;
                        width:r(20);
                        height:r(20);
                        background:#ffc9a1;
                        border-radius: 50%;
                    }
                    .active{
                        background: #ff9344;
                    }
                }
            }
        }
    }
    .cheap{
        width:100%;
        height:r(75);
        margin-top:r(45);
        .cheap_text{
            float:left;
            width:r(250);
            height:px(75);
            line-height:px(75);
            font-size: 16px;
            padding-left:px(120);
            background: url(../images/delicious_food.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
        .cheap_more{
            float: right;
            width:r(116);
            height:px(75);
            font-size: 16px;
            line-height:px(75);
            font-size: 16px;
            padding-right:r(10);
            background: url(../images/more.png)no-repeat;
            background-size:px(38) px(38);
            background-position:right px(10) top px(18);
        }
        .sport{
            background: url(../images/people.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
        .movie{
            background: url(../images/movice.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
    }
    .good_food{
        width:100%;
        height:r(133);
        margin:r(37) 0 r(36) 0;
        ul{
            li{
                width:25%;
                float:left;
                height:r(133);
                a{
                    display: block;
                    width:r(133);
                    height:r(133);
                    margin:auto;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
            }
        }
       
    }
}
// 脚部样式
footer{
    width:100%;
    height:px(150);
    position: absolute;
    bottom:0;
    li{
        width:25%;
        float:left;
        i{
            width:100%;
            height:px(100);
            line-height: px(100);
            display: block;
            text-align: center;
        }
        .iconfont{
            font-size:px(50);
            color:#fe9241;
        }
        p{
            text-align: center;
            font-size:14px;
            font-family: "微软雅黑";
            color:#000;
        }
    }
}
// 媒体查询
@media screen and (min-width:320px) and (max-width:357px){
    .section{
        .cheap{
            width:100%;
            height:r(75);
            margin-top:r(45);
            .cheap_text{
                font-size: 14px;
                background-size:px(70) px(68);
            }
            .cheap_more{
                font-size: 14px;
                background-position:right px(10) top px(18);
            }
            .love{
                background-size:px(70) px(68);
            }
        }
    }
 
}
@media screen and (min-width:768px){
    header{
        height:px(150);
        p{
            line-height:px(150);
            font-size:18px;
        }
        .back_btn{
            input{
                width:px(140);
                height:px(67);
                line-height: px(67);
                margin-top:px(40);
            }
        } 
    }
    .section{
        
        top:px(150);
        .cheap{
            height:r(50);
            margin-top:r(30);
            .cheap_text{
                font-size: 20px;
                background-size:px(70) px(68);
                background-position:left px(28) top 0;
            }
            .cheap_more{
                width:r(60);
                font-size: 18px;
            }
        }
    }
    footer{
        li{
            p{
                font-size:16px;
            }
        }
    }
    
}